Rodrigo

Hi @MDesigns and welcome to the GSAP Forums! You're looking for ScrollTrigger's refresh method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.refresh() Something like this: $('.post-list-footer a').click(function(e) { e.preventDefault(); $('.post').show(); $(this).hide(); // After adding the new elements refresh the ScrollTrigger instances on the page ScrollTrigger.refresh(); }); That will tell ScrollTrigger to run all the calculations again, updating the start and end points accordingly. Here is a fork of your demo: https://codepen.io/GreenSock/pen/rNbEyGw Here is a demo that emulates an API callback using ScrollTrigger's batch method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.batch() https://codepen.io/GreenSock/pen/YzOzjbL Hopefully this helps. Happy Tweening!

Hi, As far as I can see this in your demo is scaling properly. What exactly is not working, or the issue here? Sorry but maybe I'm missing something obvious here 🤷‍♂️ Maybe you could check GSAP MatchMedia, but I'm not sure if your question/issue is in that realm: https://gsap.com/docs/v3/GSAP/gsap.matchMedia() Sorry I can't be of more assistance, if can please be more specific about what should happen in your demo as you reduce the screen width. Hopefully this helps. Happy Tweening!

Hi, Sorry about the issues, but honestly I've never been to keen on unit testing, even less GSAP instances or effects of it, I just don't see the need for it, but that's just me. I fiddled around with your demo and the issue here is that the test seems to run and finish before the GSAP instance is completed, I added a dummy test assertion: expect("true").toMatch("true"); So the test will always succeed, and added this to the GSAP code: console.log('click handler'); // <- YES // Animate box gsap .to(boxRef.current, { x: 120, rotation: 360, onStart: () => { console.log('tween started', Date.now());// <- YES }, onComplete: () => { boxRef.current.setAttribute('data-animated', 'true'); console.log('complete', Date.now()); // <- NO }, }) .then(() => { console.log('THEN CALLBACK', Date.now()); // <- NO }); So I see the first two logs in the terminal running the test but not the other two. That clearly means that the GSAP instance is not being completed in the test environment. I even tried returning the GSAP instance, expecting that returning the promise could work with the test but it didn't work. The fact that the onStart callback is working tells me that the test environment is running this code, the async/await is not waiting for the GSAP instance to be completed. In fact running this on the test file: // Stimulate user interactions console.log("before", Date.now());// before 1714688301281 await user.click(screen.getByRole('button')); console.log("AFTER", Date.now());// AFTER 1714688301370 // 1714688301370 - 1714688301281 = 89 As you can see only 89 milliseconds elapsed , while the GSAP instance has a default duration of 500 MS, that confirms that the test is not really waiting for the animation to be completed. I wish I knew what the issue is here but is clearly not a GSAP related one, as far as I can see. Sorry I can't be of more assistance. Happy Tweening!

Hi, These threads can provide a good starting point: Hopefully this helps. Happy Tweening!

Hi @Danny21 and welcome to the GSAP Forums! In this cases is better to create just a single timeline to control everything. It's always a good idea to start without ScrollTrigger and focus on the animation first and then plug ScrollTrigger back into the mix. Maybe something like this: https://codepen.io/GreenSock/pen/rNbELKO Hopefully this helps. Happy Tweening!

Hi @milecoder and welcome to the GSAP Forums! That can be done with the Observer Plugin: https://gsap.com/docs/v3/Plugins/Observer/ If you check that particular site, in that section they hide the custom scrollbar, if you hover on it you'll see the scrollbar again and you can actually scroll past that section without the swipe effect. What can be used is a combination of ScrollTrigger and Observer as shown in this demo: https://codepen.io/GreenSock/pen/ExEOeJQ Hopefully this helps. Happy Tweening!

That's great! Regarding the code, as @mvaneijgen says: "if it works, it works". If the code you have in place is doing what you need then just keep it. Thanks for reporting back and sharing your solution with the community, I'm sure many users will benefit from your generosity! 💚 Happy Tweening!

What exactly is not working on Stackblitz? Everything seems ok on my end 🤷‍♂️

It should be as simple as this: let isFlipped = false; function demo(ease, duration, delay) { const state = Flip.getState(".small, .large"); document.body.classList.toggle("active"); Flip.from(state, { absolute: true, ease, duration, delay, zIndex: 10, fade: true, onComplete() { isFlipped = !isFlipped; isFlipped ? demo("power2.out", 1, 1) : demo("power3.inOut", 0.5, 0.5); } }); } demo("power3.inOut", 0.5, 0); Hopefully this helps. Happy Tweening!

Hi, Yeah the issue is not related to GSAP but simply the way these frameworks/libraries actually work. When you toggle the setOpen state, that tells radix to render the modal component, but it doesn't mean that the DOM has been updated. When you create this: useGSAP( () => { tlRef.current = gsap.timeline({ paused: true, defaults: { ease: 'power1.inOut' }, }); tlRef.current .to('.modal', { autoAlpha: 1, duration: 0.7 }) .to('.overlay', { autoAlpha: 1, duration: 0.5 }, '<') .to( '.menu-item', { autoAlpha: 1, stagger: 0.1, duration: 1, }, '>' ) .reverse(); }, { scope: containerRef, } ); That runs when the component first mounts and the modal is not mounted so all those selectors come back null, so while the GSAP Timeline has been created, no DOM element will be animated. In fact if you remove all your GSAP code and leave just this: const [isOpen, setIsOpen] = useState(false); const [isMounted, setIsMounted] = useState(false); const containerRef = useRef<HTMLDivElement | null>(null); const toggle = () => { setIsOpen(!isOpen); }; useEffect(() => { setIsMounted(true); }, []); And inspect the DOM there is nothing being added to it, so updating the isOpen state is not causing any effect in the DOM, the modal is not even being rendered, so you should first check that the modal is being rendered in the DOM before it can be animated with GSAP. Happy Tweening!

Hi, This is the simplest way I can think of doing that: https://codepen.io/GreenSock/pen/LYvoaNb Hopefully this helps. Happy Tweening!

I doubt you'll run into performance problems with this TBH, since you have a rather small collection of elements. IMHO though this seems simpler to understand, follow and maintain: const blockElements = gsap.utils.toArray(".block"); const block1 = blocks.querySelector(".block-1"); const block2 = blocks.querySelector(".block-2"); const block3 = blocks.querySelector(".block-3"); const blockSettings = [ { element: block1, position: 30 }, { element: block2, position: 50 }, { element: block3, position: 60 } ]; blockSettings.forEach((b, i) => { const block = blockElements[i]; const otherBlocks = blockElements.filter((block, j) => i !== j); tl.add(() => { gsap.to(block, { opacity: 1, duration: 1, scale: 1 }); gsap.to(otherBlocks, { opacity: 0, duration: 1, scale: 1.2 }); }, b.position); }); You don't have to resort to that conditional block and anything that results in simpler and shorter code, is going to make more sense if you have to look at it in 6 months. Here is a fork of your demo: https://codepen.io/GreenSock/pen/oNORmKL Is worth mentioning that using the add() to add an anonymous function is the same as using call(): const tl = gsap.timeline(); tl.add(() => {}, position); // Exactly the same tl.call(() => {}, [/*parameters*/], position); Hopefully this helps. Happy Tweening!

Hi @MarOne, You can check the resources in the Webflow installation page on our Learning Center: https://gsap.com/resources/Webflow#installation Also we have a brand new installation video, where @Cassie goes into a lot of detail including webflow: This starts right with webflow, but you can go to youtube and check the chapters on the video so you can jump directly to a specific section. Hopefully this helps. Happy Tweening!

I'm not 100% sure I follow what you're trying to do. I forked the codepen and made some changes to it: https://codepen.io/GreenSock/pen/wvZbQKX At the end the pinnedContainer config is not needed since any of the pinned elements is adding any vertical space. Hopefully this helps. Happy Tweening!

That is exactly what the position parameter can do. Another way is to keep the logic you have now, but find a way to run it just once and not everytime the GSAP instance updates, that's too wasteful. Happy Tweening!